<template>
    <div style="box-shadow:0px 0px 5px 10px #000;width: 100px;height: 100px;position: fixed;z-index: 99;top: 10px;left: 300px" >
        <p style="color: red">玩家：xxx</p>
        当前血量:7<br>
        当前能量：0
    </div>
    <div style="box-shadow:0px 0px 5px 10px #000;width: 100px;height: 100px;position: fixed;z-index: 99;right: 300px;bottom: 10px">
        <p>玩家：xxx</p>
        当前血量:3<br>
        当前能量：0
    </div>
    <div id="game" style="width: 1032px;text-align:center;margin: 0 auto;height: 920px;background: chartreuse">
    <table id="enemy">
        <tr>
            <td>
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>场地卡</span>
                            <el-button class="button" type="text">操作按钮</el-button>
                        </div>
                    </template>
                    <div class="text item">
                        当前无场地
                    </div>
                </el-card>
            </td>
            <td>
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>爱狗人士</span>
                            <el-button class="button" type="text">操作按钮</el-button>
                        </div>
                    </template>
                    <div class="text item">
                        介绍：爱狗偏执者，对蔑视生命的生物攻击力翻倍，对狗类伤害默认+1
                        <br><br>
                        攻击：1 血量：1 能量：0
                    </div>
                </el-card>
            </td>
            <td>
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>爱狗人士</span>
                            <el-button class="button" type="text">操作按钮</el-button>
                        </div>
                    </template>
                    <div class="text item">
                        介绍：爱狗偏执者，对蔑视生命的生物攻击力翻倍，对狗类伤害默认+1
                        <br><br>
                        攻击：1 血量：1 能量：0
                    </div>
                </el-card>
            </td>
            <td>
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>爱狗人士</span>
                            <el-button class="button" type="text">操作按钮</el-button>
                        </div>
                    </template>
                    <div class="text item">
                        介绍：爱狗偏执者，对蔑视生命的生物攻击力翻倍，对狗类伤害默认+1
                        <br><br>
                        攻击：1 血量：1 能量：0
                    </div>
                </el-card>
            </td>
            <td>
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>墓地</span>
                            <el-button class="button" type="text">操作按钮</el-button>
                        </div>
                    </template>
                    <div class="text item">
                        数量：3
                    </div>
                </el-card>
            </td>
        </tr>
        <tr>
            <td id="1">
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>额外卡组</span>
                            <el-button class="button" type="text">操作按钮</el-button>
                        </div>
                    </template>
                    <div class="text item">
                        ？？？
                    </div>
                </el-card>
            </td>

            <td>
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>盖牌</span>
                            <el-button class="button" type="text">操作按钮</el-button>
                        </div>
                    </template>
                    <div class="text item">
                        暂时不明
                    </div>
                </el-card>
            </td>
            <td>
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>盖牌</span>
                            <el-button class="button" type="text">操作按钮</el-button>
                        </div>
                    </template>
                    <div class="text item">
                        暂时不明
                    </div>
                </el-card>
            </td>
            <td>
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>盖牌</span>
                            <el-button class="button" type="text">操作按钮</el-button>
                        </div>
                    </template>
                    <div class="text item">
                        暂时不明
                    </div>
                </el-card>
            </td>
            <td>
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>卡组</span>
                            <el-button class="button" type="text">操作按钮</el-button>
                        </div>
                    </template>
                    <div class="text item">
                        数量：17
                    </div>
                </el-card>
            </td>
        </tr>
    </table>
        <table id="you" style="margin-top: 50px">
            <tr>
                <td>
                    <el-card class="box-card">
                        <template #header>
                            <div class="card-header">
                                <span>场地卡</span>
                                <el-button class="button" type="text">操作按钮</el-button>
                            </div>
                        </template>
                        <div class="text item">
                            当前无场地
                        </div>
                    </el-card>
                </td>
                <td>
                    <el-card class="box-card">
                        <template #header>
                            <div class="card-header">
                                <span>爱狗人士</span>
                                <el-button class="button" type="text">操作按钮</el-button>
                            </div>
                        </template>
                        <div class="text item">
                            介绍：爱狗偏执者，对蔑视生命的生物攻击力翻倍，对狗类伤害默认+1
                            <br><br>
                            攻击：1 血量：1 能量：0
                        </div>
                    </el-card>
                </td>
                <td>
                    <el-card class="box-card">
                        <template #header>
                            <div class="card-header">
                                <span>爱狗人士</span>
                                <el-button class="button" type="text">操作按钮</el-button>
                            </div>
                        </template>
                        <div class="text item">
                            介绍：爱狗偏执者，对蔑视生命的生物攻击力翻倍，对狗类伤害默认+1
                            <br><br>
                            攻击：1 血量：1 能量：0
                        </div>
                    </el-card>
                </td>
                <td>
                    <el-card class="box-card">
                        <template #header>
                            <div class="card-header">
                                <span>爱狗人士</span>
                                <el-button class="button" type="text">操作按钮</el-button>
                            </div>
                        </template>
                        <div class="text item">
                            介绍：爱狗偏执者，对蔑视生命的生物攻击力翻倍，对狗类伤害默认+1
                            <br><br>
                            攻击：1 血量：2(+1) 能量：0
                        </div>
                    </el-card>
                </td>
                <td>
                    <el-card class="box-card">
                        <template #header>
                            <div class="card-header">
                                <span>墓地</span>
                                <el-button class="button" type="text">操作按钮</el-button>
                            </div>
                        </template>
                        <div class="text item">
                            数量：3
                        </div>
                    </el-card>
                </td>
            </tr>
            <tr>
                <td id="1">
                    <el-card class="box-card">
                        <template #header>
                            <div class="card-header">
                                <span>额外卡组</span>
                                <el-button class="button" type="text">操作按钮</el-button>
                            </div>
                        </template>
                        <div class="text item">
                            ？？？
                        </div>
                    </el-card>
                </td>

                <td>
                    <el-card class="box-card">
                        <template #header>
                            <div class="card-header">
                                <span>洛伦兹力(盖)</span>
                                <el-button class="button" type="text">操作按钮</el-button>
                            </div>
                        </template>
                        <div class="text item">
                            介绍：对方从墓地选择一张卡交给你，随后对方获得此卡
                        </div>
                    </el-card>
                </td>
                <td>
                    <el-card class="box-card">
                        <template #header>
                            <div class="card-header">
                                <span>护心镜(明)</span>
                                <el-button class="button" type="text">操作按钮</el-button>
                            </div>
                        </template>
                        <div class="text item">
                            介绍：装备人物生命值加1（目前装备角色：台湾爱狗人士）
                        </div>
                    </el-card>
                </td>
                <td>
                    <el-card class="box-card">
                        <template #header>
                            <div class="card-header">
                                <span>火烧连营(盖)</span>
                                <el-button class="button" type="text">操作按钮</el-button>
                            </div>
                        </template>
                        <div class="text item">
                            介绍：发动后在该回合内，我方角色对对方某一角色造成伤害时，它的相关属性绑定角色均造成相同伤害，对有共享属性的角色伤害默认乘2
                        </div>
                    </el-card>
                </td>
                <td>
                    <el-card class="box-card">
                        <template #header>
                            <div class="card-header">
                                <span>卡组</span>
                                <el-button class="button" type="text">操作按钮</el-button>
                            </div>
                        </template>
                        <div class="text item">
                            数量：17
                        </div>
                    </el-card>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
    export default {
        name: "Game",
        data() {
            return {

            }
        }
    }
</script>

<style>
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 20px;
    }

    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .box-card {
        width: 200px;
        height: 210px;
    }
</style>
